<template>
  <!-- 使用插槽 -->
  <waike title="collection">
      <template>
          <div class="collection">
          <div class="content">
              <h4 style="text-align:left;margin:1rem;">全部收藏</h4>
            <div class="container">
                <div v-for="i in 40" :key="i" class="flex_item">
                    <img class="flex_img" src="../assets/images/download8.jpg" alt="">
                    <p class="flex_p">莓果酒酿</p>
                </div>
            </div>
        </div> 
            <!-- 底部导航 -->
            <van-tabbar v-model="active_bar" active-color="#ee0a24">
            <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
            <van-tabbar-item name="collection" icon="star-o" to="/collection">收藏</van-tabbar-item>
            <van-tabbar-item name="me" icon="friends-o" to="/me">我的</van-tabbar-item>
            </van-tabbar>  
        </div>  
      </template>
  </waike>
</template>
<script>
import waike from "../components/waike.vue";
export default {
  components:{waike},
data() {
    return {
      active_bar:'collection',
    };
  },
}
</script>
<style scoped>
.collection>.content{
        overflow-y:scroll; 
        position:fixed; top:4rem; left:0px; right:0px; bottom:50px;
}
.collection .container{
    display:flex;
    padding:0 2%; flex-wrap: wrap;
}
.collection .flex_item{
    width:30%; padding:0 1.6%;
    text-align:left;
}
.collection .flex_img{
    width:100%; height:8.5rem;
    border-radius:0.5rem;
    object-fit:cover;
}
.flex_p{
    margin-top:0.3rem; margin-bottom:0.7rem;
    text-align:center
}
</style>